<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table>
        <tr><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td></tr>
        <tr v-for="(stu,index) in stus"><td v-text="index+1"></td><td>{{stu.name}}</td><td>年龄</td><td>性别</td></tr>
    </table>

    <button onclick="addStu()">添加学生</button>
</div>

<!--引入vue文件-->
<script type="text/javascript" src="js/vue-2.6.12.js"></script>
<script>
    const v=new Vue({
        el:"#app",
        data:{
            stus:[{name:"zhangsan",age:20,sex:"男"},{name:"朱厚宇",age:20,sex:"男"},{name:"lisi",age:20,sex:"男"}]
        }
    });
    function addStu(){
        v.stus.push({name:"赵柳",age:20,sex:"男"});
    }
</script>
</body>
</html>